<template>
	<view>
		<scroll-view scroll-x="true" >
			<view style="display: flex;justify-content: space-around;height: 100upx;line-height: 100upx;background-color: #fff;width: 1250upx;">
				<view @click="btnchange1" :style="{backgroundColor:color1}" style="padding: 0 50upx;border-radius: 50upx;">
					销售收益
				</view>
				<view @click="btnchange2" :style="{backgroundColor:color2}" style="padding: 0 50upx;border-radius: 50upx;">
					分红收益
				</view>
				<view @click="btnchange3" :style="{backgroundColor:color3}" style="padding: 0 50upx;border-radius: 50upx;">
					团队收益
				</view>
				<view @click="btnchange4" :style="{backgroundColor:color4}" style="padding: 0 50upx;border-radius: 50upx;">
					代理收益
				</view>
				<view @click="btnchange5" :style="{backgroundColor:color5}" style="padding: 0 50upx;border-radius: 50upx;">
					帮扶收益
				</view>
			</view>
		</scroll-view>
		<view v-if="type==1" v-for="(item,index) in res" :key="index" style="padding: 0 20upx;background-color: #FFFFFF;border-radius: 20upx;margin-top: 5upx;border-bottom: 2upx solid #eeeeee;position: relative;box-shadow: 2upx 2upx 10upx #CCCCCC;" >
			<view style="padding: 0 20upx;">
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">{{item.remark}}</view>
					<!-- <view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;"></view> -->
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">奖金</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;color: #FF3333;">{{item.num}}</view>
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">到账时间</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;">{{item.createtime}}</view>
				</view>
				
				
				
				<!-- <view style="min-height: 80upx;line-height: 80upx;color: #ff5500;" v-if="item.remark != ''">
					<text style="color: #ccc;">驳回理由</text>
					<text style="padding-left: 40upx;">{{item.remark}}</text>
				</view> -->
			</view>
			
		</view>
		<view v-if="type==2" v-for="(item,index) in res" :key="index" style="padding: 0 20upx;background-color: #FFFFFF;border-radius: 20upx;margin-top: 5upx;border-bottom: 2upx solid #eeeeee;position: relative;box-shadow: 2upx 2upx 10upx #CCCCCC;" >
			<view style="padding: 0 20upx;">
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">{{item.remark}}</view>
					<!-- <view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;"></view> -->
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">奖金</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;color: #FF3333;">{{item.num}}</view>
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">到账时间</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;">{{item.createtime}}</view>
				</view>
				
				
				
				<!-- <view style="min-height: 80upx;line-height: 80upx;color: #ff5500;" v-if="item.remark != ''">
					<text style="color: #ccc;">驳回理由</text>
					<text style="padding-left: 40upx;">{{item.remark}}</text>
				</view> -->
			</view>
			
		</view>
		<view v-if="type==3" v-for="(item,index) in res" :key="index" style="padding: 0 20upx;background-color: #FFFFFF;border-radius: 20upx;margin-top: 5upx;border-bottom: 2upx solid #eeeeee;position: relative;box-shadow: 2upx 2upx 10upx #CCCCCC;" >
			<view style="padding: 0 20upx;">
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">{{item.remark}}</view>
					<!-- <view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;"></view> -->
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">奖金</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;color: #FF3333;">{{item.num}}</view>
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">到账时间</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;">{{item.createtime}}</view>
				</view>
				
				
				
				<!-- <view style="min-height: 80upx;line-height: 80upx;color: #ff5500;" v-if="item.remark != ''">
					<text style="color: #ccc;">驳回理由</text>
					<text style="padding-left: 40upx;">{{item.remark}}</text>
				</view> -->
			</view>
			
		</view>
		<view v-if="type==4" v-for="(item,index) in res" :key="index" style="padding: 0 20upx;background-color: #FFFFFF;border-radius: 20upx;margin-top: 5upx;border-bottom: 2upx solid #eeeeee;position: relative;box-shadow: 2upx 2upx 10upx #CCCCCC;" >
			<view style="padding: 0 20upx;">
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">{{item.remark}}</view>
					<!-- <view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;"></view> -->
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">奖金</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;color: #FF3333;">{{item.num}}</view>
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">到账时间</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;">{{item.createtime}}</view>
				</view>
				
				
				
				<!-- <view style="min-height: 80upx;line-height: 80upx;color: #ff5500;" v-if="item.remark != ''">
					<text style="color: #ccc;">驳回理由</text>
					<text style="padding-left: 40upx;">{{item.remark}}</text>
				</view> -->
			</view>
			
		</view>
		<view v-if="type==5" v-for="(item,index) in res" :key="index" style="padding: 0 20upx;background-color: #FFFFFF;border-radius: 20upx;margin-top: 5upx;border-bottom: 2upx solid #eeeeee;position: relative;box-shadow: 2upx 2upx 10upx #CCCCCC;" >
			<view style="padding: 0 20upx;">
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">{{item.remark}}</view>
					<!-- <view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;"></view> -->
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">奖金</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;color: #FF3333;">{{item.num}}</view>
				</view>
				
				<view style="height: 80upx;line-height: 80upx;font-size: 32upx;display: flex;">
					<view style="text-align: left;flex: 1;height: 80upx;line-height: 80upx;">到账时间</view>
					<view style="text-align: right;flex: 1;height: 80upx;line-height: 80upx;">{{item.createtime}}</view>
				</view>
				
				
				
				<!-- <view style="min-height: 80upx;line-height: 80upx;color: #ff5500;" v-if="item.remark != ''">
					<text style="color: #ccc;">驳回理由</text>
					<text style="padding-left: 40upx;">{{item.remark}}</text>
				</view> -->
			</view>
			
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				res:[],
				openid:'',
				
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page: 1,
				timer:{},
				type:1,
				color1:'#F7F7F7',
				color2:'#fff',
				color3:'#fff',
				color4:'#fff',
				color5:'#fff',
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadingType = 0;//将loadingType归0重置
			this.setAjax()
			setTimeout(function () {
					uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
		methods:{
			btnchange1(){
				this.type = 1
				this.color1 = '#F7F7F7'
				this.color2 = '#fff'
				this.color3 = '#fff'
				this.color4 = '#fff'
				this.color5 = '#fff'
				this.setAjax()
			},
			btnchange2(){
				this.type = 2
				this.color1 = '#fff'
				this.color2 = '#F7F7F7'
				this.color3 = '#fff'
				this.color4 = '#fff'
				this.color5 = '#fff'
				this.setAjax()
			},
			btnchange3(){
				this.type = 3
				this.color1 = '#fff'
				this.color2 = '#fff'
				this.color3 = '#F7F7F7'
				this.color4 = '#fff'
				this.color5 = '#fff'
				this.setAjax()
			},
			btnchange4(){
				this.type = 4
				this.color1 = '#fff'
				this.color2 = '#fff'
				this.color3 = '#fff'
				this.color4 = '#F7F7F7'
				this.color5 = '#fff'
				this.setAjax()
			},
			btnchange5(){
				this.type = 5
				this.color1 = '#fff'
				this.color2 = '#fff'
				this.color3 = '#fff'
				this.color4 = '#fff'
				this.color5 = '#F7F7F7'
				this.setAjax()
			},
			setAjax(){
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.fenxiang.shouyi&app=1',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						'openid':this.openid,
						'type':this.type
					},
					success: res => {
						this.res = res.data.shouyi
						console.log(this.res)
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			getmorenews() {
				this.page++;//每触底一次 page +1
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.fenxiang.shouyi&app=1&page=' + this.page,
					method: 'POST',
					data:{
						openid: this.openid,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						if (res.data.shouyi == '' || res.data.shouyi == null) {//没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						this.res = this.res.concat(res.data.shouyi);//将数据拼接在一起
						this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
</style>

